<!DOCTYPE html>
<html id="jsbin" lang="en" class="{{#if flash_tip}}showtip{{/if}}{{#if embed}} embed{{/if}}{{#equal editorLayout "0"}}{{else}} layout layout{{editorLayout}}{{/equal}}">
<head>
  <meta charset=utf-8>
  <title>JS Bin - Collaborative JavaScript Debugging</title>
  <link rel="alternate" type="application/json+oembed" href="{{root}}/oembed?url={{root}}{{request.url}}">
  <link rel="icon" href="{{static}}/images/favicon.png">
  <link rel="stylesheet" href="{{static}}/css/style.css{{cacheBust}}">
  {{#if userCSS}}<style>{{userCSS}}</style>{{/if}}
  <link rel="stylesheet" href="{{static}}/css/font.css{{cacheBust}}">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  {{#if custom_css}}<link rel="stylesheet" href="{{makeURL custom_css static}}{{cacheBust}}">{{/if}}
  {{#equal editorLayout "0"}}{{else}}<link rel="stylesheet" href="{{static}}/css/editor-layout.css{{cacheBust}}">{{/equal}}
  <!--[if lte IE 9 ]><link rel="stylesheet" href="{{static}}/css/ie.css{{cacheBust}}"><![endif]-->
  {{#if is_production}}
    {{> analytics}}
  {{/if}}
  <meta name="description" content="A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more..." />
  {{#if bin}}
  <meta property="og:url" content="{{root}}{{code_id_path}}/edit" />
  <meta property="og:title" content="JS Bin" />
  <meta property="og:description" content="Sample of the bin: {{bin.metadata.summary}}" />
  {{else}}
  <meta property="og:url" content="{{root}}" />
  <meta property="og:title" content="JS Bin" />
  <meta property="og:description" content="A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more..." />
  {{/if}}
  <meta property="og:image" content="{{static}}/images/logo.png" />
</head>
<!--[if lt IE 7]>  <body class="source ie ie6"> <![endif]-->
<!--[if IE 7]>     <body class="source ie ie7"> <![endif]-->
<!--[if gt IE 7]>  <body class="source ie">     <![endif]-->
<!--[if !IE]><!--> <body class="source {{#if private}}private{{else}}public{{/if}}">    <!--<![endif]-->
{{#unless embed}}
<script>
if(top != self) {
  window.location = location.pathname.split('/').slice(0, -1).concat(['embed']).join('/') + (location.search ? location.search : '');
  document.write('<' + '!--');
}
</script>
<a href="#html" id="skipToEditor" class="visuallyhidden">Skip welcome & menu and move to editor</a>
{{#feature request "welcomePanel"}}
  {{> welcome_panel}}
{{/feature}}
{{/unless}}
{{> control_navigation}}
<script type="template/text" id="profile-template">
  <a title="@{name}" href="#profile" class="button button-dropdown avatar" id="accountBtn"><picture>
    <source srcset="{avatar} 1x, {avatar}?&s=58 2x">
    <img src="{avatar}">
  </picture> Account</a>
  <div class="dropdown dd-right" id="profile">
    <div class="dropdowncontent">
      <div class="large-gravatar"><object data="{{static}}/images/default-avatar.min.svg?{name}&{{version}}" type="image/svg+xml">
    <img src="{{static}}/images/default-avatar.min.svg?{{version}}"></object><picture class="large-gravatar">
    <source srcset="{large_avatar} 1x, {large_avatar}?&s=240 2x">
    <img class="large-gravatar" src="{large_avatar}">
  </picture></div>
      <span class="input" id="username" readonly>
        @{name}<sup class="pro">pro</sup>
      </span>

      <ul>
        <li><a href="{{root}}/account/profile">Profile</a></li>
        <li><a href="{{root}}/account/editor">Editor settings</a></li>
        <li><a href="{{root}}/account/preferences">Preferences</a></li>
        <li><a href="{{root}}/logout">Logout</a></li>
      </ul>

    </div>
    <a href="{{root}}/upgrade" class="gopro">Support JS Bin: upgrade to PRO</a>
  </div>
</script>
<div id="bin" class="stretch" style="opacity: 0; filter:alpha(opacity=0);">
  <div id="source" class="binview stretch">
  </div>
  <div id="panelswaiting">
    <div class="code stretch html panel">
      <div class="label menu"><span class="name"><strong><a href="#htmlprocessors" class="fake-dropdown button-dropdown">HTML</a></strong></span><div class="dropdown" id="htmlprocessors">
          <div class="dropdownmenu processorSelector" data-type="html">
            <a href="#html">HTML</a>
            <a href="#markdown">Markdown</a>
            <a href="#jade">Jade</a>
            <a href="#convert">Convert to HTML</a>
          </div>
        </div>
      </div>
      <div class="editbox">
        <textarea aria-label="HTML Code Panel" spellcheck="false" autocapitalize="none" autocorrect="off" id="html"></textarea>
      </div>
    </div>
    <div class="code stretch javascript panel">
      <div class="label menu"><span class="name"><strong><a  class="fake-dropdown button-dropdown" href="#javascriptprocessors">JavaScript</a></strong></span>
        <div class="dropdown" id="javascriptprocessors">
          <div class="dropdownmenu processorSelector" data-type="javascript">
            <a href="#javascript">JavaScript</a>
            <a href="#babel">ES6 / Babel</a>
            <a href="#jsx">JSX (React)</a>
            <a href="#coffeescript">CoffeeScript</a>
            <a href="#traceur">Traceur</a>
            <a href="#typescript">TypeScript</a>
            <a href="#processing">Processing</a>
            <a href="#livescript">LiveScript</a>
            <a href="#clojurescript">ClojureScript</a>
            <a href="#convert">Convert to JavaScript</a>
          </div>
        </div>
      </div>
      <div class="editbox">
        <textarea aria-label="JavaScript Code Panel" spellcheck="false" autocapitalize="none" autocorrect="off" id="javascript"></textarea>
      </div>
    </div>
    <div class="code stretch css panel">
      <div class="label menu"><span class="name"><strong><a class="fake-dropdown button-dropdown" href="#cssprocessors">CSS</a></strong></span>
        <div class="dropdown" id="cssprocessors">
          <div class="dropdownmenu processorSelector" data-type="css">
            <a href="#css">CSS</a>
            <a href="#less">Less</a>
            <a href="#myth">Myth</a>
            {{#feature request "processors"}}
            <a href="#sass" data-label="Sass">Sass <span class="small">with Compass</span></a>
            <a href="#scss" data-label="SCSS">SCSS <span class="small">with Compass</span></a>
            {{/feature}}
            <a href="#stylus">Stylus</a>
            <a href="#convert">Convert to CSS</a>
          </div>
        </div>
      </div>
      <div class="editbox">
        <textarea aria-label="CSS Code Panel" spellcheck="false" autocapitalize="none" autocorrect="off" id="css"></textarea>
      </div>
    </div>
    <div class="stretch console panel">
      <div class="label">
        <span class="name"><strong>Console</strong></span>
        <span class="options">
          <button id="runconsole" title="ctrl + enter">Run</button>
          <button id="clearconsole" title="ctrl + l">Clear</button>
        </span>
      </div>
      <div id="console" class="stretch"><ul id="output"></ul><form>
          <textarea aria-label="Console Panel" id="exec" spellcheck="false" autocapitalize="none" rows="1" autocorrect="off"></textarea>
      </form></div>
    </div>
    <div id="live" class="stretch live panel">
      <div class="label">
        <span class="name"><strong>Output</strong></span>
        <span class="options">
          <button id="runwithalerts" title="ctrl + enter
Include alerts, prompts &amp; confirm boxes">Run with JS</button>
          <label>Auto-run JS<input type="checkbox" id="enablejs"></label>
          <a target="_blank" title="Live preview" id="jsbinurl" class="{{#unless code_id}}hidden{{/unless}}" href="{{code_id_path}}"><img src="{{static}}/images/popout.png"></a>
        </span>
        <span class="size"></span>
      </div>
    </div>
  </div>
  {{#unless embed}}
  <form id="saveform" method="post" action="{{code_id_path}}/save">
    <input type="hidden" name="method">
    <input type="hidden" name="_csrf" value="{{token}}">
  </form>
  {{/unless}}
</div>
<div id="tip" class="{{#if flash_tip_type}}{{flash_tip_type}}{{/if}}{{#unless flash_tip_type}} notification{{/unless}}">
  <p>
    {{#if flash_tip}}{{{flash_tip}}}{{/if}}
    {{#unless flash_tip}}You can jump to the latest bin by adding <code>/latest</code> to your URL{{/unless}}
  </p>
  <a class="dismiss" href="#">Dismiss x</a>
</div>
<div id="keyboardHelp" class="modal">
  <div>
    <h2>Keyboard Shortcuts</h2>
    <table>
      <thead>
        <tr>
          <th class="shortcut">Shortcut</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ctrl + [num]</td>
          <td>Toggle nth panel</td>
        </tr>
        <tr>
          <td colspan="2">
            <small>
              <input type="checkbox" id="enablealt" class="enablealt">
              <label for="enablealt">Require alt key, leaving cmd+1, 2 etc for tab switching.</label>
            </small>
          </td>
        </tr>
        <tr>
          <td>ctrl + 0</td>
          <td>Close focused panel</td>
        </tr>
        <tr>
          <td>ctrl + enter</td>
          <td>Re-render output.<br>If console visible: run JS in console</td>
        </tr>
        <tr>
          <td>Ctrl + l</td>
          <td>Clear the console</td>
        </tr>
        <tr>
          <td>ctrl + /</td>
          <td>Toggle comment on selected lines</td>
        </tr>
        <tr>
          <td>ctrl + [</td>
          <td>Indents selected lines</td>
        </tr>
        <tr>
          <td>ctrl + ]</td>
          <td>Unindents selected lines</td>
        </tr>
        <tr>
          <td>tab</td>
          <td>Code complete &amp; <a href="http://docs.emmet.io/" target="_blank">Emmet</a> expand</td>
        </tr>
        <tr>
          <td>ctrl + shift + L</td>
          <td>Beautify code in active panel</td>
        </tr>
        <tr>
          <td>ctrl + s</td>
          <td>Save &amp; lock current Bin from further changes</td>
        </tr>
        <tr>
          <td>ctrl + shift + s</td>
          <td>Open the share options</td>
        </tr>
        <tr>
          <td>ctrl + y</td>
          <td>Archive Bin</td>
        </tr>
        <tr><td colspan="2"><small><br><a href="{{root}}/help/keyboard-shortcuts" target="_blank">Complete list of JS Bin shortcuts</a></small></td></tr>
      </tbody>
    </table>
  </div>
</div>
<div id="urlHelp" class="modal">
  <div>
    <h2>JS Bin URLs</h2>
    <table>
      <thead>
        <tr>
          <th class="shortcut">URL</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>/</td>
          <td>Show the full rendered output.<br><small>This content will update in real time as it's updated from the /edit url.</small></td>
        </tr>
        <tr>
          <td>/edit</td>
          <td>Edit the current bin</td>
        </tr>
        <tr>
          <td>/watch</td>
          <td>Follow a Code Casting session</td>
        </tr>
        <tr>
          <td>/embed</td>
          <td>Create an embeddable version of the bin</td>
        </tr>
        <tr>
          <td>/latest</td>
          <td>Load the very latest bin (/latest goes in place of the revision)</td>
        </tr>
        <tr>
          <td>/{{#if home}}{{home}}{{/if}}{{#unless home}}[username]{{/unless}}/last</td>
          <td>View the last edited bin for this user</td>
        </tr>
        <tr>
          <td>/{{#if home}}{{home}}{{/if}}{{#unless home}}[username]{{/unless}}/last/edit</td>
          <td>Edit the last edited bin for this user</td>
        </tr>
        <tr>
          <td>/{{#if home}}{{home}}{{/if}}{{#unless home}}[username]{{/unless}}/last/watch</td>
          <td>Follow the Code Casting session for the latest bin for this user</td>
        </tr>
        <tr>
          <td>/quiet</td>
          <td>Remove analytics and edit button from rendered output</td>
        </tr>
        <tr>
          <td>.js</td>
          <td>Load only the JavaScript for a bin</td>
        </tr>
        <tr>
          <td>.css</td>
          <td>Load only the CSS for a bin</td>
        </tr>
        <tr><td colspan="2"><br><small>Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently.</small></td></tr>
      </tbody>
    </table>
  </div>
</div>
{{#unless embed}}
{{>infocard}}
{{/unless}}

<script src="{{static}}/js/vendor/jquery-1.11.0.min.js"></script>
<script src="{{root}}/bin/user.js?{{bust}}"></script>
{{!-- we use the passed in version of isProduction here, not the the app global as we need to be able to switch it - even when in production --}}
{{#if isProduction}}
<script src="{{static}}/js/prod/jsbin-{{version}}.min.js"></script>
<script src="{{root}}/bin/start.js?{{bust}}"></script>
{{else}}{{!- if development, we need include the user code first, otherwise last --}}
<script src="{{root}}/bin/start.js?{{bust}}"></script>
  {{#if concat}}
<script src="{{static}}/js/prod/jsbin-{{version}}.js"></script>
  {{else}}
  {{#scripts}}<script src="{{../static}}{{.}}{{cacheBust}}"></script>{{/scripts}}
  {{/if}}
  {{#addons}}<script src="{{../static}}{{.}}{{cacheBust}}"></script>{{/addons}}
{{/if}}
{{#if live}}
<script src="{{static}}/js/vendor/eventsource.js{{cacheBust}}"></script>
<script src="{{static}}/js/spike.js{{cacheBust}}"></script>
{{/if}}
{{#if custom_js}}
<script src="{{makeURL custom_js static}}{{cacheBust}}"></script>
{{/if}}
</body>
</html>

